<template>
  <a-card class="body-container">
    <a-row justify="end">
      <a-col :span="12"
        ><a-button-group style="float: right; margin-bottom: 10px">
          <s-button
            @click="
              () => {
                $parent.openList()
              }
            "
            ><s-icon type="left-outlined" />返回</s-button
          >
        </a-button-group></a-col
      >
    </a-row>
    <s-form
      ref="form"
      :value="formValue"
      body-style="width:100%;height:100%"
      style="height: 100%; width: 100%"
    >
      <s-tabs style="width: 100%; height: 100%" class="property-panel">
        <a-tab-pane key="0" tab="基础属性">
          <s-scroll>
            <a-row>
              <s-form-item
                label="接口名称"
                size="small"
                name="name"
                :colon="true"
                :display-title="true"
                :rules="[
                  { whitespace: true, required: true, message: '接口名称不能为空' },
                  { max: 50, message: '最长为50位' }
                ]"
              >
                <s-input
                  v-model="formValue.name"
                  disabled
                  :allow-clear="true"
                  placeholder="请输入接口名称"
                />
              </s-form-item>
              <s-form-item
                label="接口类型"
                size="small"
                name="type"
                :colon="true"
                :display-title="true"
                :rules="[{ whitespace: true, required: true, message: '接口类型不能为空' }]"
              >
                <s-select
                  v-model="formValue.type"
                  disabled
                  :allow-clear="true"
                  placeholder="请选择接口类型"
                  :show-search="true"
                  code="ONLINE_API_TYPE"
                />
              </s-form-item>
              <s-form-item
                label="接口说明"
                size="custom"
                :options="{ labelWidth: 3, wrapperWidth: 20, offsetWidth: 1, total: 16 }"
                name="description"
                :colon="true"
                :display-title="true"
                :rules="[{ max: 500, message: '最长为500位' }]"
              >
                <s-text-area
                  v-model="formValue.description"
                  disabled
                  :allow-clear="true"
                  placeholder="请输入说明"
                  :row-num="5"
                />
              </s-form-item>
            </a-row>
            <a-row>
              <s-form-item
                label="角色"
                size="small"
                name="roleList"
                :colon="true"
                :display-title="true"
              >
                <s-tree
                  ref="roleList"
                  v-model="formValue.roleList"
                  disabled
                  height="200px"
                  url="/authority/role/selectList"
                  value-field="id"
                  placeholder="角色列表"
                />
              </s-form-item>
              <s-form-item
                label="权限"
                size="small"
                name="permissionList"
                :colon="true"
                :display-title="true"
              >
                <s-tree
                  ref="permissionList"
                  v-model="formValue.permissionList"
                  disabled
                  height="200px"
                  url="/authority/permission/selectList"
                  value-field="id"
                  placeholder="权限列表"
                />
              </s-form-item>
            </a-row>
          </s-scroll>
        </a-tab-pane>

        <a-tab-pane key="1" tab="参数">
          <a-row style="height: 100%">
            <a-col :span="11" style="height: 100%">
              <a-card title="请求参数" style="height: calc(100% - 30px)" size="small">
                <json-viewer v-model="formValue.requestParam" />
              </a-card>
            </a-col>
            <a-col :span="11" style="height: 100%" :offset="1">
              <a-card title="响应参数" style="height: calc(100% - 30px)" size="small">
                <json-viewer v-model="formValue.responseParam" />
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="SQL" :force-render="true">
          <a-row style="height: 100%">
            <s-form-item
              size="custom"
              name="sql"
              style="height: 100%"
              :colon="false"
              :options="{ labelWidth: 0, wrapperWidth: 24, offsetWidth: 0, total: 24 }"
              :display-title="false"
              :rules="[{ whitespace: true, required: true, message: 'SQL不能为空' }]"
            >
              <div style="height: calc(100vh - 400px); font-size: 18px">
                <sql-editor ref="sqlEditor" :doc="formValue.sql"> </sql-editor>
              </div>
            </s-form-item>
          </a-row>
        </a-tab-pane>
      </s-tabs>
    </s-form>
  </a-card>
</template>

<script>
import SqlEditor from '@/components/SqlEditor/index.vue'
import { ref } from 'vue'
import JsonViewer from '@/components/JsonViewer/index.vue'
export default {
  name: 'Add',
  components: {
    JsonViewer,
    SqlEditor
  },
  props: {
    dataId: {
      required: true
    }
  },
  data() {
    return {
      formValue: {}
    }
  },
  mounted() {
    this.$loading(true)
    this.$api
      .GET('/onlineApi/selectOneById', { id: this.dataId })
      .then((res) => {
        if (!res.data) {
          this.$loading(false)
          this.$message.warn('数据不存在')
        } else {
          res.data.requestParam = res.data.requestParam ? JSON.parse(res.data.requestParam) : {}
          res.data.responseParam = res.data.responseParam ? JSON.parse(res.data.responseParam) : {}
          this.formValue = res.data
          this.setDoc(res.data.sql)
          this.$loading(false)
        }
      })
      .catch(() => {
        this.$loading(false)
      })
  }
}
</script>

<style lang="less" scoped>
.property-panel:deep(.ant-tabs-content) {
  height: 100%;
  width: 100%;
}
.property-panel:deep(.ant-tabs-content-holder) {
  height: 100%;
  width: 100%;
  flex-basis: 0;
}
.codemirror {
  ::v-deep(.cm-editor) {
    height: 100%;
    width: calc(100% - 100px);
    font-size: 18px;
  }
}
</style>
